<template>
  <div class="table-container">
    <div class="table-title">运维成本及折旧费用</div>
    <div class="formula-detail">
      <el-collapse class="formula-collapse" v-model="activeNames" accordion @change="handleChange">
        <el-collapse-item title="公式详情" name="1">
          <div class="formula">风电总价F = 风力发电度数A * 风力单价B</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table ref="tableRef" :data="tableData" border style="width: 100%" show-summary>
      <el-table-column prop="year" label="年份" width="150"></el-table-column>
      <el-table-column prop="2020" label="2020" width="150">
        <template #default="scope">
          <el-input size="small" v-model="scope.row['2020']"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="2021" label="2021" width="120">
        <template #default="scope">
          <el-input size="small" v-model="scope.row['2021']"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="2022" label="2022" width="120">
        <template #default="scope">
          <el-input size="small" v-model="scope.row['2022']"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="2023" label="2023" width="120">
        <template #default="scope">
          <el-input size="small" v-model="scope.row['2023']"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="2024" label="2024" width="120">
        <template #default="scope">
          <el-input size="small" v-model="scope.row['2024']"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="plan_cost"
        label="计划费用（针对未并网或未运行完整自然年机组）"
        width="120"
      >
        <template #default="scope">
          <el-input size="small" v-model="scope.row.plan_cost"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="补充说明">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.desc"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import type { CollapseModelValue } from 'element-plus';

// 对象类型
export type IObject = Record<string, any>;

const activeNames = ref('1');
const handleChange = (val: CollapseModelValue) => {};

// 列表数据
const tableData = ref<Object[]>([
  {
    year: '年度运维成本',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '',
  },
  {
    year: '年度人工成本',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '',
  },
  {
    year: '年度维护检修成本',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '',
  },
  {
    year: '年度其他运维成本',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '',
  },
  {
    year: '年度容量租赁支出（若无可不填）',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '',
  },
  {
    year: '设备更换',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '',
  },
  {
    year: '折旧年限（年）',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '光伏一般按20年考虑；陆上风电一般按15年考虑，海上风电一般按18年考虑。',
  },
  {
    year: '净残值率（%）（扣除其他费用后净残值）',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '一般按5.00%考虑，具体根据设计方案确定，保留小数点后2位',
  },
  {
    year: '年折旧费用（万元）',
    2020: '',
    2021: '',
    2022: '',
    2023: '',
    2024: '',
    plan_cost: '',
    desc: '',
  },
]);
</script>

<style lang="scss" scoped>
.formula-detail {
  display: flex;
  justify-content: flex-end;
}
.formula-collapse {
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding-left: 10px;

  :deep(.el-collapse-item__header) {
    color: #4080ff;
    background-color: transparent;
  }
}
.formula {
  padding: 5px;
}
</style>